<template>
	<div>
		<van-grid :column-num="3">
			<van-grid-item v-for="(item,index) in player_list" :key="index">
				<template #text>
					<van-image v-if="item.gamerStatus == 0"
							   round
							   width="5rem"
							   height="5rem"
							   @click="vote(item)"
							   :src="cover_prefix+cover_unline_img" />
							   
					<van-image v-else-if="item.gamerStatus == 3"
							   round
							   width="5rem"
							   height="5rem"
							   @click="vote_dead(item)"
							   :src="cover_prefix+cover_die_img" />

					<van-image v-else
							   round
							   width="5rem"
							   height="5rem"
							   @click="vote(item)"
							   :src="cover_prefix+item.head_cover" />
							   
					<van-col>{{item.nickname}}</van-col>
					<van-col>
						<van-tag type="warning"
								 v-if="item.gamerStatus == 0">等待重连</van-tag>
						<van-tag type="primary"
								 v-else-if="item.gamerStatus == 1">已准备</van-tag>
						<van-tag type="success"
								 v-else-if="item.gamerStatus == 2">存活</van-tag>
						<van-tag type="danger"
								 v-else>死亡</van-tag>
					</van-col>
				</template>
			</van-grid-item>
		</van-grid>
	</div>
</template>

<script>
import Vue from 'vue';
import { Grid,GridItem } from 'vant';

Vue.use(Grid);
Vue.use(GridItem);

export default {
	name : 'tabsPlayer',
	props:{
		roomInfo:'',
		playerList:'',
		playerInfo:'',
		IsHasDie:'',
		StartVoting:'',
		ThisVote:'',
	},
	watch:{
	    roomInfo:{//深度监听，可监听到对象、数组的变化
	        handler(val, oldVal){
	            this.changeRoomInfoData();
	        },
	        deep:true //true 深度监听
	    },
		playerList:{//深度监听，可监听到对象、数组的变化
		    handler(val, oldVal){
		        this.changePlayerListData();
		    },
		    deep:true //true 深度监听
		},
		playerInfo:{//深度监听，可监听到对象、数组的变化
		    handler(val, oldVal){
		        this.changePlayerInfoData();
		    },
		    deep:true //true 深度监听
		},
		IsHasDie:{//深度监听，可监听到对象、数组的变化
		    handler(val, oldVal){
		        this.changeIsHasDieData();
		    },
		    deep:true //true 深度监听
		},
		StartVoting:{//深度监听，可监听到对象、数组的变化
		    handler(val, oldVal){
		        this.changeStartVotingData();
		    },
		    deep:true //true 深度监听
		},
		ThisVote:{//深度监听，可监听到对象、数组的变化
		    handler(val, oldVal){
		        this.changeThisVoteData();
		    },
		    deep:true //true 深度监听
		}
	},
	data() {
		return {
			room_info:{},
			player_info:{},
			player_list:[],
			isHasDie:false,			//是否死亡（被投票出局）
			startVoting:false,		//是否可以投票
			this_vote:false,		//是否已经投票
			cover_prefix:'',
			cover_die_img:'',		//死亡图片-服务器获取
			cover_unline_img:'',	//离线图片-服务器获取
		};
	},
	created() {
		//获取静态资源路径
		this.getStaticFilePath();
	},
	methods: {
		changeRoomInfoData(){
			this.room_info = this.roomInfo;
			console.log('tabsPalter-RoomInfo:',this.roomInfo);
		},
		changePlayerListData(){
			this.player_list = this.playerList;
			console.log('tabsPalter-PlayerList:',this.playerList) 
		},
		changePlayerInfoData(){
			this.player_info = this.playerInfo;
			console.log('tabsPalter-PlayerInfo:',this.playerInfo)
		},
		changeIsHasDieData(){
			this.isHasDie = this.IsHasDie;
			console.log('tabsPalter-IsHasDie:',this.isHasDie);
		},
		changeStartVotingData(){
			this.startVoting = this.StartVoting;
			console.log('tabsPalter-startVoting:',this.startVoting) 
		},
		changeThisVoteData(){
			this.this_vote = this.ThisVote;
			console.log('tabsPalter-ThisVote:',this.this_vote)
		},
		getStaticFilePath(){
			this.$post('/game/static/cover',{}).then(res => {
				if (res.code == 200) {
					this.cover_prefix    = res.data.url;
					this.cover_die_img   = res.data.type_2.static_path;
					this.cover_unline_img= res.data.type_3.static_path;
				} 
			});
		},
		vote(item) {
			if (this.startVoting === false) {
				this.$toast({message:'不在开局状态下不允许投票',position:'bottom',duration: 1500});
				return false;
			}
			
			if(this.isHasDie === true){
				this.$toast({message:'您已被投票出局，无法操作',position:'bottom',duration: 1500});
				return false;
			}

			if (this.this_vote){
				this.$toast({message:'本轮您已投票，请勿重复操作',position:'bottom',duration: 1500});
				return false;
			}
			
			if (item.gamerStatus == 3) {
				this.$toast({message:'该玩家已被投票出局，把票留投给其他玩家吧',position:'bottom',duration: 1500});
				return false;
			}
			
			this.$dialog.confirm({
				message: '是否确定要举报【'+item.nickname+'】玩家', theme: 'round-button',
			}).then(() => {
				item.operator_nickname = this.player_info.nickname;
				
				this.$post('/game/server/report', item).then(res => {
					if (res.code == 200) {
						this.this_vote = true;
						sessionStorage.setItem('this_vote',true);
						this.$toast({message:'投票成功',position:'bottom',duration: 1500});
					} else {
						this.$toast({message:res.msg,position:'bottom',duration: 1500});
					}
				})
			}).catch(() => {
				console.log('This report has been cancelled !');	// on close
			});
		},
		vote_dead(item) {
			this.$notify({ type: 'danger', message: '【'+item.nickname+'】 玩家已死亡，无法对其投票/举报' });
			//console.log('【'+item.user_name+'】 玩家已死亡，无法对其投票/举报');
		}
	}
};

</script>

<style scoped>
	.goods-card {
	    margin: 0;
	    background-color: @white;
	}
	.delete-button {
		height: 100%;
	}
</style>
